<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>3.Jq动画初认识</title>
<link rel="stylesheet" type="text/css" href="../public/public.css"/>
<style>
    .ui-input{
        width:300px; height:40px; border:1px solid #ccc; line-height: 40px; padding-left:10px; margin-bottom:10px;
    }
    .ui-textarea{
        width:400px; height:80px; border:1px solid #ccc; line-height: 200%; padding: 10px; margin-bottom:10px;
    }
    .ui-button{
        width:auto; display: inline-block; height:40px; line-height: 40px; padding:0px 20px; cursor: pointer;
    }
    .box{
        padding:35px;
    }
</style>
</head>

<body>
    <Br><Br>
<h1 class="h1-text">案例3-Jq动画初认识(会跑的小车)</h1>
<div class="div-des">
    
    <h2 class="name">用到的Jquery重点知识点：</h2>
    <p class="des">
        Jqery内置的方法如下 ：<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;1.点击事件： click() ;   
                &nbsp;&nbsp;&nbsp;&nbsp;参考资料：<a href="http://www.w3school.com.cn/jquery/jquery_events.asp" target="_blank">点击这里</a><Br />
        
        &nbsp;&nbsp;&nbsp;&nbsp;2.动画 animate()；
                &nbsp;&nbsp;&nbsp;&nbsp;参考资料：<a href="http://www.w3school.com.cn/jquery/jquery_animate.asp" target="_blank">点击这里</a><Br />
        
        &nbsp;&nbsp;&nbsp;&nbsp;3.获取css属性值 css()；
                &nbsp;&nbsp;&nbsp;&nbsp;参考资料：<a href="http://www.w3school.com.cn/jquery/jquery_css.asp" target="_blank">点击这里</a><Br />
        
        &nbsp;&nbsp;&nbsp;&nbsp;4.字符型转浮点型 parseFloat()；
                &nbsp;&nbsp;&nbsp;&nbsp;参考资料：<a href="http://www.runoob.com/jsref/jsref-parsefloat.html" target="_blank">点击这里</a><Br />
        
    </p>
</div>
<Br><Br><Br><Br><Br>

<div class="box">
    <h1 class="h2-text">1:固定值</h1>
    <img src="car.png" id="car"/>
    <Br />
    <Br />
    <button class="ui-button" id="beforeButton">前进</button>
    <button class="ui-button" id="afterButton">倒车</button>
    <Br />
    <Br />
    <Br />
    <Br />
    <Br />

    <h1 class="h2-text">2:不固定值</h1>
    <img src="car2.png" id="car50"/>
    <Br />
    <Br />
    
    <button class="ui-button" id="beforeButton50">前进50px</button>
    <button class="ui-button" id="afterButton50">倒车50px</button>
    
</div>
    
<Br><Br><Br><Br>
    
    
    
    
    
<script type="text/javascript" src="../public/jquery.js"></script>
<script>
	$(function(){
		//申明Jquery固定的函数，Js代码都写在这个Function 里面
        $("#beforeButton").click(function(){
            $("#car").animate({marginLeft:1000},"fast");
        });
        $("#afterButton").click(function(){
            $("#car").animate({marginLeft:0},"slow");
        });
        
        
        
        //每点击一次向前移动50px
        $("#beforeButton50").click(function(){
            var leftValue = $("#car50").css("marginLeft"); //获取当前 marginLeft的值，获得的类型为字符串类型，需要转化成整型Int或浮点型float
            leftValue = parseFloat(leftValue);  //  这里转为浮点类型
            $("#car50").animate({marginLeft:leftValue+50},"1000");
        });
        //每点击一次向后移动50px
        $("#afterButton50").click(function(){
            var leftValue = $("#car50").css("marginLeft"); //获取当前 marginLeft的值，获得的类型为字符串类型，需要转化成整型Int或浮点型float
            leftValue = parseFloat(leftValue);  //  这里转为浮点类型
            if(leftValue<0){
                leftValue = 0;
            }
            $("#car50").animate({marginLeft:leftValue-50},"1000");
        });
        
        
	})

</script>
</body>
</html>
